<template>
  <PageContainer>
    <Header title="切换智能助手" />
    <view class="hb-p-4">
      <TmText _class="hb-w-full hb-text-center hb-mb-12" label="选择智能助手" :font-size="48" />
      <template v-for="item in dataList" :key="item.id">
        <view
          class="hb-p-3 hb-mb-4 hb-bg-white hb-rounded-lg hb-border hb-border-solid hb-border-transparent hb-flex hb-items-center hb-box-shadow-base"
          :style="{
            borderColor: item.id === activeId ? '#2878FF' : '',
          }"
          @click="handleSwitchAI(item)"
        >
          <view class="hb-w-12 hb-flex-shrink-0 hb-relative">
            <TmImage :src="item.iconFileUrl" :width="96" :height="96" :round="4" />
            <view
              v-if="item.backlogNum > 0"
              class="hb-absolute hb--right-1 hb--top-1 hb-ml-2 hb-flex-shrink-0 hb-w-4 hb-h-4 hb-rounded-full hb-bg-[#EA5E0E] hb-flex hb-items-center hb-justify-center"
            >
              <text class="hb-text-white hb-text-[20rpx]">
                {{ item.backlogNum > 99 ? '99+' : item.backlogNum }}
              </text>
            </view>
          </view>
          <view class="hb-ml-3 hb-h-12 hb-flex-1 hb-flex hb-flex-col hb-justify-between">
            <view class="hb-flex hb-items-center">
              <TmText
                _class="hb-font-bold text-overflow-1 hb-mr-2"
                :label="item.name"
                :font-size="32"
              />
              <RoleTag
                v-if="item.roleType === RoleTypeEnum.SUPER_ADMIN"
                text="超级管理员"
                type="superAdmin"
              />
              <RoleTag
                v-else-if="item.roleType === RoleTypeEnum.ADMIN"
                text="管理员"
                type="admin"
              />
              <RoleTag v-else text="个人认证" type="member" />
            </view>
            <!-- 认证 -->
            <AuthenticationTag :certification-type="item.certificationType" />
          </view>
          <view class="hb-ml-3 hb-w-5 hb-h-10 hb-flex hb-items-center hb-justify-center">
            <CustomRadio v-if="item.id === activeId" :checked="true" />
          </view>
        </view>
      </template>
      <template v-if="!requestLoading">
        <!-- 新建 -->
        <view
          v-if="isCreate"
          class="hb-h-18 hb-mb-4 hb-flex hb-items-center hb-justify-center hb-bg-white hb-rounded-[8rpx] hb-border hb-border-dashed hb-border-[#EBEDF0]"
          @click="handleCreateAI"
        >
          <TmIcon name="tmicon-plus" :font-size="32" />
          <TmText _class="hb-ml-2" label="新建智能助手" :font-size="28" />
        </view>
        <view class="hb-h-18"></view>
        <!-- 切换账号 -->
        <view class="hb-fixed hb-bottom-0 hb-left-0 hb-w-full hb-px-4 hb-py-3 hb-bg-white">
          <TmButton
            :margin="[0, 0]"
            :padding="[0]"
            :block="true"
            color="primary"
            font-color="primary"
            :height="88"
            :font-size="32"
            outlined
            :round="16"
            label="切换账号"
            @click="handleSwitchAccount"
          />
        </view>
      </template>
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /* aiSwitch 切换智能体 */
  import { aiAccountBotList, aiCutBot } from '@/api/aiSettings';
  import { AiAccountBotListResult } from '@/api/aiSettings/types';
  import { RoleTypeEnum, AuthTypeEnum } from '@/enums/LoginEnum';
  import { TabbarPageEnum } from '@/enums/PageEnum';
  import { useUserStore } from '@/store/modules/user';

  const userStore = useUserStore();
  const { userInfo } = storeToRefs(userStore);
  const activeId = ref<number>();

  const dataList = ref<AiAccountBotListResult[]>([]);
  const requestLoading = ref(true);

  function getAiList() {
    aiAccountBotList().then((res) => {
      activeId.value = userInfo.value?.aiUserAccountBotVo?.id;
      dataList.value = res;
      requestLoading.value = false;
    });
  }

  getAiList();

  const isCreate = computed(
    () => dataList.value.filter((item) => item.roleType === RoleTypeEnum.SUPER_ADMIN)?.length < 5,
  );

  /** 切换AI助手 */
  const handleSwitchAI = (item: AiAccountBotListResult) => {
    activeId.value = item.id;
    uni.showLoading({
      title: '切换中...',
      mask: true,
    });
    aiCutBot({ botId: item.id })
      .then(() => {
        userStore.getUserInfo();
        switchTab(TabbarPageEnum.BASE_HOME);
      })
      .finally(() => uni.hideLoading());
  };

  /** 创建AI助手 */
  const handleCreateAI = () => {
    navigateTo({
      name: 'createAi',
    });
  };

  const handleSwitchAccount = () => {
    navigateTo({
      name: 'login',
      options: {
        success: () => getAiList(),
      },
    });
  };
</script>

<style lang="scss" scoped></style>
